<template>
	<view class="body " style="background-image: url(/static/image/bg.jpg);">
		<view class="pt40 pl40 pb20 sub f24">报销明细</view>
		<view class="list bg-white p40">
			<view class="item mb20">
				<view class="name f32"><text class="red mr10 pos">*</text>报销金额(元)</view>
				<input type="text" placeholder="请输入金额" class="line f28 mt10" />
			</view>
			<view class="item mb20">
				<view class="name f32"><text class="red mr10 pos">*</text>报销类别(元)</view>
				<input type="text" placeholder="如:采购经费,活动经费" class="line f28 mt10" />
			</view>
			<view class="item">
				<view class="name f32">费用明细(元)</view>
				<view class="mt10">
					<up-textarea placeholderStyle='color: #999' height="200" maxlength='5000' border='none' count
						v-model="data.note" placeholder="请输入费用明细描述"></up-textarea>
				</view>
			</view>
		</view>
		<view class="pt40 pl40 pb20 sub f24">总报西销售金额（元）</view>
		<view class="item mb20 d-b-c bg-white pt20 pl40 pr40 pb20">
			<view class="name f32">图片</view>
			<up-upload :fileList="data.file" accept='image' @afterRead="afterRead" @delete="deletePic"
				:maxCount="1"></up-upload>
		</view>
		<view class="item mb20 d-b-c bg-white  pt20 pl40 pr40 pb20">
			<view class="name f32">附件</view>
			<up-upload :fileList="data.file" accept='file' @afterRead="afterRead" @delete="deletePic"
				:maxCount="1"></up-upload>
		</view>
		<view class="item bg-white  pt20 pl40 pr40 pb20 mb20">
			<view class="name f32">流程</view>
			<view class="mt10">
				<up-steps current="-1" dot direction="column">
					<picker mode="selector" :value="data.spr" :range="data.list" @change="setPic('spr',$event)">
						<up-steps-item title="审批人" :desc="data.spr==-1?'请选择审批人':data.list[data.spr]">
							<template #right>
								<up-icon name="plus"></up-icon>
							</template>
						</up-steps-item>
					</picker>
					<picker mode="selector" :value="data.scr" :range="data.list" @change="setPic('spr',$event)">
						<up-steps-item title="抄送人" :desc="data.spr==-1?'请选择抄送人':data.list[data.scr]">
							<template #right>
								<up-icon name="plus"></up-icon>
							</template>
						</up-steps-item>
					</picker>
				</up-steps>
			</view>
		</view>
		<view class="item d-b-c bg-white  pt20 pl40 pr40 pb20">
			<view class="">提交并发送</view>
			<view class="tr f28">
				<picker mode="selector" :value="data.cIndex" :range="data.zxr" @change="setPic('cIndex',$event)">
					<view class="d-b-c">
						<view class="mr10" v-if="data.cIndex!=-1">{{data.zxr[data.cIndex]}}</view>
						<view class="sub mr10" v-else><up-icon name="plus"></up-icon></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="p30">
			<up-button text="提交" color="#1379e5" shape="circle"></up-button>
		</view>
	</view>
</template>
<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	import { timeFormat } from '@/uni_modules/uview-plus';
	const store = useStore()
	const data = reactive({
		note: '',
		zxr: ['黑马青年', '张三', '李四'],
		spr: -1,
		scr: -1,
		cIndex: -1,
		file: []
	})

	function setPic(name, e) {
		data[name] = e.detail.value
	}
	async function afterRead(e) {
		data.file.push(e.file)
		console.log(data.file);
	}

	function deletePic(e) {
		data.file.splice(e.index, 1);
	}
	onLoad(() => {})
</script>
<style scoped lang="scss">
	::v-deep .u-upload {
		flex: 0 !important;

		.u-upload__button {
			margin: 0;
		}
	}

	::v-deep .u-textarea {
		padding: 0 !important;
	}

	.name {
		position: relative;

		.pos {
			position: absolute;
			left: -20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>